<template>
    <el-container>
        <el-header style="height: 50px;border-bottom: none">
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'waresend.add'" ></el-button>
                <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0" @click="batch_del" v-auth="'waresend.delete'"></el-button>
                <sc-import-button :auth="'waresend.import'" :apiObj="importObj" :base="base + '/file_templets/temples_send.xlsx'" @importSuccess="importSuccess" ></sc-import-button>
                <sc-export-button :auth="'waresend.export'" :apiObj="apiObj" :search="search" :selection="selection"></sc-export-button>
                <el-button style="margin-left: 10px;" type="primary" @click="add" v-auth="'waresend.add'" >清关统计</el-button>
                <el-button type="warning" @click="cancel_record" v-auth="'waresend.cancel'" >作废记录</el-button>
                <div class="finish">
                    <div class="finishNum">总货值:
                        <div class="text">{{ total_stock.total_money }}</div>
                    </div>
                </div>
            </div>
        </el-header>
        <el-header>
            <div class="left-panel">
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <!-- <el-input v-model="search.send_code" placeholder="发货单号" clearable @keyup.enter="upsearch"></el-input> -->
                    <el-input v-model="search.search_keyword"  class="input-with-search" style="width: 300px" @keyup.enter="upsearch">
                        <template #prepend>
                            <el-select v-model="search.search_field" filterable clearable placeholder="请选择" style="width: 110px">
                                <el-option label="发货单号" value="send_code"/>
                                <el-option label="货柜号码" value="container_code"/>
                                <el-option label="清关公司" value="custom"/>
                                <el-option label="目的港" value="port"/>
                                <el-option label="提单号" value="bl_no"/>
                                <el-option label="箱号" value="box_no"/>
                                <el-option label="条码" value="roll_code"/>
                                <el-option label="地区" value="area_name"/>
                            </el-select>
                        </template>
                    </el-input>
                    <el-select v-model="search.status" placeholder="状态" clearable>
                        <el-option label="预发" :value="0"></el-option>
                        <el-option label="在途" :value="1"></el-option>
                        <el-option label="到港" :value="2"></el-option>
                        <el-option label="转运" :value="3"></el-option>
                        <el-option label="清关" :value="4"></el-option>
                        <el-option label="出关运输" :value="5"></el-option>
                        <el-option label="已入库" :value="6"></el-option>
                        <el-option label="全部" :value="-1"></el-option>
                    </el-select>
                    <el-date-picker v-model="search.send_date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" @setExtend="setExtend" border tableName="sendTable" :column="sendColumn" :params="search"><!--  :params="search" -->
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <!-- <el-table-column label="序号" type="index" width="60" align="center"></el-table-column> -->
                <template #send_code="{row}">
                    <div class="display">
                        <div style="width: 60%">
                            <div style="display: flex;align-items: center;">单号：
                                <el-link :underline="false" type="primary" @click="table_show(row)">{{ row.send_code }}</el-link>
                                <el-icon class="icon" :size="20" @click="common.copy(row.send_code)"><el-icon-Edit /></el-icon>
                                <el-icon class="icon" color="#1e9fff" :size="18" @click="send_bell(row)" v-auth="'waresend.message'"><el-icon-BellFilled /></el-icon>
                            </div>
                        </div>
                        <div style="width: 40%">
                            <div class="margin">总匹数：<span>{{row.total_count}}</span> </div>
                        </div>
                    </div>
                    <div class="display">
                        <div class="margin">订单状态：
                            <span class="status" :style="{color: getStatusColor(row),borderColor: getStatusBorder(row),background: getStatusBackground(row)}">
                                {{row.status == 0 ? '预发' : row.status == 1 ? '在途' : row.status == 2 ? '到港' :row.status == 3 ? '转运' : row.status == 4 ? '清关' : row.status == 5 ? '出关运输' : row.status == 6 ? '已入库' : '预发'}}
                            </span>
                            <el-icon style="margin-left: 10px;" class="icon" color="#1e9fff" :size="16" @click="table_status(row)"><el-icon-DArrowRight /></el-icon>
                        </div>
                        <div style="width: 40%">
                            <div class="margin">总码数：<span>{{row.total_num}}</span> </div>
                        </div>
                    </div>
                    <div class="display">
                        <div class="margin">地区：<span>{{row.area?.name}}</span> </div>
                        <div style="width: 40%">
                            <div class="margin">总货值：<span>{{row.total_money}}</span> </div>
                        </div>
                    </div>
                    <div class="display">
                        <div style="display: flex;align-items: center;">备注：
                            <el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0 || row.status == 1 || row.status == 99" @click="table_write(row,'remark','备注')"><el-icon-EditPen /></el-icon>
                            <el-popover placement="top-start" :width="230" trigger="hover" :content="row.remark">
                                <template #reference>
                                    <div style="width: 170px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{row.remark}}</div>
                                </template>
                            </el-popover>
                        </div>
                        <div style="width: 40%">
                            <div class="margin">业务员：<span>{{row.admin?.name}}</span> </div>
                        </div>
                    </div>
                </template>
                <template #container_code="{row}">
                    <div style="margin: 10px 0">货柜编号：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0 || row.status == 99" @click="table_write(row,'container_code','货柜编号：')"><el-icon-EditPen /></el-icon> <span>{{row.container_code}}</span></div>
                    <div style="margin: 10px 0">船司：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0 || row.status == 99" @click="table_write(row,'shipping','船司')"><el-icon-EditPen /></el-icon> <span>{{row.shipping}}</span></div>
                    <div style="margin: 10px 0">清关公司：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0 || row.status == 99" @click="table_write(row,'custom','清关公司')"><el-icon-EditPen /></el-icon> <span>{{row.custom}}</span></div>
                    <div style="margin: 10px 0">目的港：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0 || row.status == 99" @click="table_write(row,'port','目的港')"><el-icon-EditPen /></el-icon> <span>{{row.port}}</span></div>
                </template>
                <template #bl_no="{row}">
                    <div style="margin: 10px 0">提单号：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0 || row.status == 99" @click="table_write(row,'bl_no','提单号')"><el-icon-EditPen /></el-icon> <span>{{row.bl_no}}</span></div>
                    <div style="margin: 10px 0">箱号：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0 || row.status == 99" @click="table_write(row,'box_no','箱号')"><el-icon-EditPen /></el-icon> <span>{{row.box_no}}</span></div>
                    <div style="margin: 10px 0">封号：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0 || row.status == 99" @click="table_write(row,'seal_no','封号')"><el-icon-EditPen /></el-icon> <span>{{row.seal_no}}</span></div>
                </template>
                <template #trans_price="{row}">
                    <div style="margin: 10px 0">
                        海运费：<el-icon class="icon" color="#1e9fff" :size="18" @click="table_trans(row)" v-if="row.status == 0 || row.status == 99"><el-icon-EditPen /></el-icon> 
                        <el-tooltip content="Bottom center" effect="customized">
                            <template #content>
                                <div class="tooltip">海运费USD: {{row.sea_price_usd}}</div>
                                <div class="tooltip">美金汇率: {{row.usd_rate}}</div>
                                <div class="tooltip">海运费: {{row.sea_price}}</div>
                                <div class="tooltip">内陆费: {{row.land_price}}</div>
                                <div class="tooltip">其他费: {{row.other_price}}</div>
                            </template>
                            <span>{{row.trans_price}}</span>
                        </el-tooltip>
                    </div>
                    <div style="margin: 10px 0">
                        清关费：<el-icon class="icon" color="#1e9fff" :size="18" @click="table_custom(row)" v-if="row.status != 0 || row.status == 1"><el-icon-EditPen /></el-icon>  <!-- -->
                        <el-tooltip content="Bottom center" effect="customized">
                            <template #content>
                                <div class="tooltip">清关费(NGN): {{row.clear_price}}</div>
                                <div class="tooltip">国外杂费：{{row.area_container_price}}</div>
                                <div class="tooltip">当日奈拉汇率: {{row.ngn_rate}}</div>
                                <div class="tooltip">当日美金汇率: {{row.usa_rate}}</div>
                            </template>
                            <span>{{row.custom_price}}</span>
                        </el-tooltip>
                    </div>
                    <div style="margin: 10px 0">
                        国内杂费：<el-icon class="icon" color="#1e9fff" :size="18" @click="table_sundry(row)" v-if="row.status == 0 || row.status == 99"><el-icon-EditPen /></el-icon> 
                        <el-tooltip content="Bottom center" effect="customized">
                            <template #content>
                                <div class="tooltip">装柜费: {{row.container_price}}</div>
                                <div class="tooltip">其他: {{row.otherc_price}}</div>
                                <div class="tooltip">运营费用: {{row.run_price}}</div>
                            </template>
                            <span>{{row.sundry_price}}</span>
                        </el-tooltip>
                    </div>
                </template>
                <template #meter="{row}">
                    <div style="margin: 10px 0">
                        每码海运费: {{row.meter_sea_price}}
                    </div>
                    <div style="margin: 10px 0">
                        每码清关费: {{row.meter_clear_price}}
                    </div>
                </template>
                <template #operation="scope">
                    <div class="btn">
                        <div>
                            <el-button type="success" size="small" @click="table_append(scope.row,$event)" v-auth="'waresend.append'" v-if="scope.row.status == 0 || scope.row.status == 99">追加</el-button>
                            <el-button type="warning" size="small" @click="table_restock(scope.row,1,$event)" v-auth="'waresend.restock'" v-if="scope.row.is_tongbu == 1">补货</el-button>
                            <el-button type="warning" size="small" @click="table_restock(scope.row,2,$event)" v-auth="'waresend.returnstock'" v-if="scope.row.is_tongbu == 1">退货</el-button>
                            <el-button type="primary" size="small" @click="table_edit(scope.row,$event)" v-auth="'waresend.edit'" v-if="scope.row.status == 0 || scope.row.status == 99">编辑</el-button>
                            <el-button type="primary" size="small" @click="send_check(scope.row,$event)" v-auth="'waresend.status'" v-if="scope.row.ware_number == 0">状态</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row,$event)">
                                <template #reference>
                                    <el-button type="danger" size="small" v-auth="'waresend.delete'" v-if="scope.row.status == 0 || scope.row.status == 99">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button type="success" size="small" @click="table_house(scope.row,$event)" v-auth="'waresend.house'" v-if="scope.row.status == 5">入库</el-button>
                            <el-button type="primary" size="small" @click="send_record(scope.row,$event)" v-auth="'waresend.record'" v-if="scope.row.status >= 5 && scope.row.status != 99">记录</el-button>
                        </div>
                        <div>
                            <el-button size="small" @click="table_container(scope.row,$event)" v-auth="'waresend.container'">货柜码单</el-button>
                            <el-button size="small" @click="table_code_all(scope.row,$event)" v-auth="'waresend.packall'">码单汇总</el-button>
                            <el-button size="small" @click="table_code_detail(scope.row,$event)" v-auth="'waresend.detail'">明细码单</el-button>
                            <el-button size="small" @click="table_comparison(scope.row,$event)" v-auth="'waresend.comparison'">报关清单</el-button>
                        </div>
                    </div>
                </template>
                

                <!-- <el-table-column label="订单信息" prop="purchase_process_code" width="450">
                    <template #default="{row}">
                        <div class="display">
                            <div style="width: 60%">
                                <div style="display: flex;align-items: center;">单号：
                                    <el-link type="primary" @click="table_show(row)">{{ row.send_code }}</el-link>
                                    <el-icon class="icon" :size="20" @click="common.copy(row.send_code)"><el-icon-Edit /></el-icon>
                                    <el-icon class="icon" color="#1e9fff" :size="18" @click="send_bell(row)" v-auth="'waresend.message'"><el-icon-BellFilled /></el-icon>
                                </div>
                            </div>
                            <div style="width: 40%">
                                <div class="margin">总匹数：<span>{{row.total_count}}</span> </div>
                            </div>
                        </div>
                        <div class="display">
                            <div class="margin">订单状态：
                                <span class="status" :style="{color: getStatusColor(row),borderColor: getStatusBorder(row),background: getStatusBackground(row)}">
                                    {{row.status == 0 ? '预发' : row.status == 1 ? '在途' : row.status == 2 ? '到港' :row.status == 3 ? '转运' : row.status == 4 ? '清关' : row.status == 5 ? '出关运输' : row.status == 6 ? '入库' : '预发'}}
                                </span>
                                <el-icon style="margin-left: 10px;" class="icon" color="#1e9fff" :size="16" @click="table_status(row)"><el-icon-DArrowRight /></el-icon>
                            </div>
                            <div style="width: 40%">
                                <div class="margin">总码数：<span>{{row.total_num}}</span> </div>
                            </div>
                        </div>
                        <div class="display">
                            <div class="margin">地区：<span>{{row.area?.name}}</span> </div>
                            <div style="width: 40%">
                                <div class="margin">总货值：<span>{{row.total_money}}</span> </div>
                            </div>
                        </div>
                        <div class="display">
                            <div>备注：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0 || row.status == 1" @click="table_write(row,'remark','备注')"><el-icon-EditPen /></el-icon> <span>{{row.remark}}</span></div>
                            <div style="width: 40%">
                                <div class="margin">业务员：<span>{{row.admin?.name}}</span> </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="其他信息" prop="purchase_process_code" width="300">
                    <template #default="{row}">
                        <div style="margin: 10px 0">货柜编号：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0" @click="table_write(row,'container_code','货柜编号：')"><el-icon-EditPen /></el-icon> <span>{{row.container_code}}</span></div>
                        <div style="margin: 10px 0">船司：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0" @click="table_write(row,'shipping','船司')"><el-icon-EditPen /></el-icon> <span>{{row.shipping}}</span></div>
                        <div style="margin: 10px 0">清关公司：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0" @click="table_write(row,'custom','清关公司')"><el-icon-EditPen /></el-icon> <span>{{row.custom}}</span></div>
                        <div style="margin: 10px 0">目的港：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0" @click="table_write(row,'port','目的港')"><el-icon-EditPen /></el-icon> <span>{{row.port}}</span></div>
                    </template>
                </el-table-column>
                <el-table-column label="" prop="purchase_process_code" width="300" v-auth="'waresend.append'">
                    <template #default="{row}">
                        <div style="margin: 10px 0">提单号：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0" @click="table_write(row,'bl_no','提单号')"><el-icon-EditPen /></el-icon> <span>{{row.bl_no}}</span></div>
                        <div style="margin: 10px 0">箱号：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0" @click="table_write(row,'box_no','箱号')"><el-icon-EditPen /></el-icon> <span>{{row.box_no}}</span></div>
                        <div style="margin: 10px 0">封号：<el-icon class="icon" color="#1e9fff" :size="18" v-if="row.status == 0" @click="table_write(row,'seal_no','封号')"><el-icon-EditPen /></el-icon> <span>{{row.seal_no}}</span></div>
                    </template>
                </el-table-column>
                <el-table-column label="" prop="purchase_process_code" width="300">
                    <template #default="{row}">
                        <div style="margin: 10px 0">
                            海运费：<el-icon class="icon" color="#1e9fff" :size="18" @click="table_trans(row)" v-if="row.status == 0"><el-icon-EditPen /></el-icon> 
                            <el-tooltip content="Bottom center" effect="customized">
                                <template #content>
                                    <div class="tooltip">海运费USD: {{row.sea_price_usd}}</div>
                                    <div class="tooltip">美金汇率: {{row.usd_rate}}</div>
                                    <div class="tooltip">海运费: {{row.sea_price}}</div>
                                    <div class="tooltip">内陆费: {{row.land_price}}</div>
                                    <div class="tooltip">其他费: {{row.other_price}}</div>
                                </template>
                                <span>{{row.trans_price}}</span>
                            </el-tooltip>
                        </div>
                        <div style="margin: 10px 0">
                            清关费：<el-icon class="icon" color="#1e9fff" :size="18" @click="table_custom(row)" v-if="row.status != 0 || row.status == 1"><el-icon-EditPen /></el-icon>
                            <el-tooltip content="Bottom center" effect="customized">
                                <template #content>
                                    <div class="tooltip">清关费(NGN): {{row.clear_price}}</div>
                                    <div class="tooltip">国外杂费：{{row.area_container_price}}</div>
                                    <div class="tooltip">当日奈拉汇率: {{row.ngn_rate}}</div>
                                    <div class="tooltip">当日美金汇率: {{row.usa_rate}}</div>
                                </template>
                                <span>{{row.custom_price}}</span>
                            </el-tooltip>
                        </div>
                        <div style="margin: 10px 0">
                            国内杂费：<el-icon class="icon" color="#1e9fff" :size="18" @click="table_sundry(row)" v-if="row.status == 0"><el-icon-EditPen /></el-icon> 
                            <el-tooltip content="Bottom center" effect="customized">
                                <template #content>
                                    <div class="tooltip">装柜费: {{row.container_price}}</div>
                                    <div class="tooltip">其他: {{row.otherc_price}}</div>
                                    <div class="tooltip">运营费用: {{row.run_price}}</div>
                                </template>
                                <span>{{row.sundry_price}}</span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="220">
                    <template #default="scope">
                        <div class="btn">
                            <div>
                                <el-button type="success" size="small" @click="table_append(scope.row)" v-auth="'waresend.append'" v-if="scope.row.status == 0">追加</el-button>
                                <el-button type="warning" size="small" @click="table_restock(scope.row,1)" v-auth="'waresend.restock'" v-if="scope.row.is_tongbu == 1">补货</el-button>
                                <el-button type="warning" size="small" @click="table_restock(scope.row,2)" v-auth="'waresend.returnstock'" v-if="scope.row.is_tongbu == 1">退货</el-button>
                                <el-button type="success" size="small" @click="table_edit(scope.row)" v-auth="'waresend.edit'" v-if="scope.row.status == 0">编辑</el-button>
                                <el-button type="primary" size="small" @click="send_check(scope.row)" v-auth="'waresend.status'" v-if="scope.row.ware_number == 0">状态</el-button>
                                <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                    <template #reference>
                                        <el-button type="danger" size="small" v-auth="'waresend.delete'" v-if="scope.row.status == 0">删除</el-button>
                                    </template>
                                </el-popconfirm>
                                <el-button type="success" size="small" @click="table_house(scope.row)" v-auth="'waresend.house'" v-if="scope.row.status == 5">入库</el-button>
                                <el-button type="primary" size="small" @click="send_record(scope.row)" v-auth="'waresend.record'" v-if="scope.row.status == 5">记录</el-button>
                            </div>
                            <div>
                                <el-button size="small" @click="table_container(scope.row)" v-auth="'waresend.container'">货柜码单</el-button>
                                <el-button size="small" @click="table_code_all(scope.row)" v-auth="'waresend.packall'">码单汇总</el-button>
                                <el-button size="small" @click="table_code_detail(scope.row)" v-auth="'waresend.detail'">明细码单</el-button>
                                <el-button size="small" @click="table_comparison(scope.row)" v-auth="'waresend.comparison'">报关清单</el-button>
                            </div>
                        </div>
                    </template>
                </el-table-column> -->
            </scTable>
        </el-main>
    </el-container>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
    <append-save v-if="dialog.append" ref="appendDialog" @success="handleSuccess" @closed="dialog.append = false"></append-save>
    <check-status v-if="dialog.check" ref="checkDialog" @success="handleSuccess" @closed="dialog.check = false"></check-status>
    <notice-save v-if="dialog.notice" ref="noticeDialog" @success="handleSuccess" @closed="dialog.notice = false"></notice-save>
    <edit-save v-if="dialog.edit" ref="editDialog" @success="handleSuccess" @closed="dialog.edit = false"></edit-save><!-- 备注等... -->
    <custom-save v-if="dialog.custom" ref="customDialog" @success="handleSuccess" @closed="dialog.custom = false"></custom-save><!-- 清关 -->
    <sundry-save v-if="dialog.sundry" ref="sundryDialog" @success="handleSuccess" @closed="dialog.sundry = false"></sundry-save><!-- 杂费 -->
    <trans-save v-if="dialog.trans" ref="transDialog" @success="handleSuccess" @closed="dialog.trans = false"></trans-save><!-- 运费 -->
    <status-list v-if="dialog.list" ref="listDialog" @success="handleSuccess" @closed="dialog.list = false" :query="{id: id}"></status-list><!-- 状态修改记录 -->
    <hosue-save v-if="dialog.house" ref="houseDialog" @success="handleSuccess" @closed="dialog.house = false"></hosue-save>
    <house-record v-if="dialog.record" ref="recordDialog" @success="handleSuccess" @closed="dialog.record = false" :query="{received_date: 1, send_id: id}"></house-record>

    <send-print v-if="dialog.print" ref="printDialog" @success="handleSuccess" @closed="dialog.print = false"></send-print>
    <sendcode-print v-if="dialog.print1" ref="print1Dialog" @success="handleSuccess" @closed="dialog.print1 = false"></sendcode-print>
    <sendmater-print v-if="dialog.print2" ref="print2Dialog" @success="handleSuccess" @closed="dialog.print2 = false"></sendmater-print>
    <sendcompar-print v-if="dialog.print3" ref="print3Dialog" @success="handleSuccess" @closed="dialog.print3 = false"></sendcompar-print>
    <restock-save v-if="dialog.restock" ref="restockDialog" @success="handleSuccess" @closed="dialog.restock = false"></restock-save>

    <cancel-record v-if="dialog.cancel" ref="cancelDialog" @success="handleSuccess" @closed="dialog.cancel = false"></cancel-record>
</template>

<script>
import CheckStatus from './checkStatus.vue'
import saveDialog from './save'
import NoticeSave from '../../noticeSave.vue'
import EditSave from './editSave.vue'
import CustomSave from './customSave.vue'
import SundrySave from './sundrySave.vue'
import TransSave from './transSave.vue'
import StatusList from './statusList.vue'
import HosueSave from './hosueSave.vue'
import HouseRecord from './houseRecord.vue'
import SendPrint from './sendPrint.vue'
import SendcodePrint from './sendcodePrint.vue'
import SendmaterPrint from './sendmaterPrint.vue'
import SendcomparPrint from './comparPrint.vue'
import config from '@/config'
import AppendSave from './appendSave.vue'
import RestockSave from './restockSave.vue'
import CancelRecord from './cancelRecord.vue'


export default {
    name: '采购计划管理',
    components: {
        saveDialog, CheckStatus, NoticeSave, EditSave, CustomSave, SundrySave, TransSave, StatusList, HosueSave, HouseRecord, SendmaterPrint, SendPrint, SendcodePrint, SendcomparPrint, RestockSave, AppendSave, CancelRecord
    },
    data() {
        return {
            dialog: {
                save: false,
                check: false,
                look: false,
                notice: false,
                edit: false,
                custom: false,
                sundry: false,
                trans: false,
                list: false,
                house: false,
                record: false,
                print: false,
                print1: false,
                print2: false,
                print3: false,
                restock: false,
                append: false,
                cancel: false,
            },
            apiObj: this.$API.ware.ware.send.list,
            base: config.API_URL,
			importObj: this.$API.ware.ware.send.import,
            selection: [],
            search: {
                search_keyword: null,
                search_field: null, 
                send_code: null,
                send_date: [this.moment().startOf('year').format('YYYY-MM-DD'), this.moment().endOf('year').format('YYYY-MM-DD')],
                status: 0,
                goods_name: null
            },
            id: "",
            today: new Date(),
            total_stock: {
                total_money: 0,
            },
            sendColumn: [
                { label: "订单信息", prop: "send_code", width: "450",align: 'left'},
                { label: "其他信息", prop: "container_code", width: "250",align: 'left'},
                { label: "", prop: "bl_no", width: "250",align: 'left'},
                { label: "", prop: "trans_price", width: "250",align: 'left'},
                { label: "", prop: "meter", width: "250",align: 'left'},
                { label: "操作", prop: "operation", width: "220",fixed: 'right'},
            ],
        }
    },
    mounted() {
        if(this.$route.query.code) {
            this.search.send_code = this.$route.query.code
            this.upsearch()
        }
    },
    methods: {
        setExtend(data){
            this.total_stock = data
        },
        getStatusColor(row) {
            let create = new Date((row.send_date))
            let day = Math.floor((this.today - create) / (24 * 60 * 60 * 1000))
            if(row.status == 0){
                if(day > 7) {
                    row.status = 99
                }
            }
            const colors = {
                99: '#ff5722',
                0: '#393d49',
                1: '#1e9fff',
                2: '#fff',
                3: '#fff',
                4: '#fff',
                5: '#fff'
            };
            return colors[row.status] || '';
        },
        getStatusBackground(row) {
            let create = new Date((row.send_date))
            let day = Math.floor((this.today - create) / (24 * 60 * 60 * 1000))
            if(row.status == 0){
                if(day > 7) {
                    row.status = 99
                }
            }
            const background = {
                99: 'fff',
                0: '#fff',
                1: '#fff',
                2: '#ffbb22',
                3: '#ffbb22',
                4: '#009688',
                5: '#009688'
            };
            return background[row.status] || '';
        },
        getStatusBorder(row) {
            let create = new Date((row.send_date))
            let day = Math.floor((this.today - create) / (24 * 60 * 60 * 1000))
            if(row.status == 0){
                if(day > 7) {
                    row.status = 99
                }
            }
            const border = {
                99: '#ff5722',
                0: '#393d49',
                1: '#1e9fff',
                2: '#ffbb22',
                3: '#ffbb22',
                4: '#009688',
                5: '#009688'
            };
            return border[row.status] || '';
        },
        // 导入成功
        importSuccess(){
            this.$refs.table.refresh()
        },
        //添加
        add(e) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open()
            })
            this.common.buttonBlur(e)
        },
        //编辑
        table_edit(row,e) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },
        //查看
        table_show(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('show').setData(row)
            })
        },
        //删除
        async table_del(row,e) {
            var reqData = { id: row.id }
            var res = await this.$API.ware.ware.send.delete.post(reqData);
            if (res.code == 1) {
                this.$refs.table.refresh()
                this.$message.success("删除成功")
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
            this.common.buttonBlur(e)
        },
        async table_del_all(delete_ids) {
            var reqData = { id: delete_ids }
            var res = await this.$API.ware.ware.send.delete.post(reqData);
            if (res.code == 1) {
                this.$refs.table.refresh()
                this.$message.success("删除成功")
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
        },
        //批量删除
        async batch_del(e) {
            var delete_ids = [];
            this.selection.forEach((item) => {
                delete_ids.push(item.id)
            })

            this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
                type: 'warning'
            }).then(() => {
                this.table_del_all(delete_ids)
            }).catch(() => {

            })
            this.common.buttonBlur(e)
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection;
        },
        //搜索
        upsearch(e) {
            this.$refs.table.upData(this.search)
            this.common.buttonBlur(e)
        },
        refresh(e) {
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.search.send_date = [this.moment().startOf('year').format('YYYY-MM-DD'), this.moment().endOf('year').format('YYYY-MM-DD')],
            this.$refs.table.upData(this.search)
            this.common.buttonBlur(e)
        },
        //本地更新数据
        handleSuccess(data, mode) {
            console.log(mode);
            if (mode == 'add') {
                this.$refs.table.refresh()
            } else if (mode == 'edit') {
                this.$refs.table.refresh()
            }
        },
        // 入库提醒
        send_bell(row){
            let data = {
                id: row.id,
                code: row.send_code,
                apply_id: row.apply_id
            }
            this.dialog.notice = true
            this.$nextTick(() => {
                this.$refs.noticeDialog.open('edit').setData(data,'发货单',7)
            })
        },
        // 备注,编号,箱号等
        table_write(row,text,font){
            this.dialog.edit = true
            this.$nextTick(() => {
                this.$refs.editDialog.open('edit').setData(row,text,font)
            })
        },
        // 运费
        table_trans(row){
            this.dialog.trans = true
            this.$nextTick(() => {
                this.$refs.transDialog.open('edit').setData(row)
            })
        },
        // 清关费
        table_custom(row){
            this.dialog.custom = true
            this.$nextTick(() => {
                this.$refs.customDialog.open('edit').setData(row)
            })
        },
        // 杂费
        table_sundry(row){
            this.dialog.sundry = true
            this.$nextTick(() => {
                this.$refs.sundryDialog.open('edit').setData(row)
            })
        },
        // 状态
        send_check(row){
            this.dialog.check = true
            this.$nextTick(() => {
                this.$refs.checkDialog.open('edit').setData(row)
            })
        },
        // 状态记录
        table_status(row){
            this.id = row.id
            this.dialog.list = true
            this.$nextTick(() => {
                this.$refs.listDialog.open('edit')
            })
        },

        // 入库
        table_house(row,e){
            if(row.custom_price <= 0) return this.$message.error("请先填写清关费")
            this.dialog.house = true
            this.$nextTick(() => {
                this.$refs.houseDialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },
        send_record(row,e){
            this.id = row.id
            this.dialog.record = true
            this.$nextTick(() => {
                this.$refs.recordDialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },
        // 货柜码单
        table_container(row,e){
            this.dialog.print = true
            this.$nextTick(() => {
                this.$refs.printDialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },
        // 码单汇总
        table_code_all(row,e){
            this.dialog.print1 = true
            this.$nextTick(() => {
                this.$refs.print1Dialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },
        // 明细码单
        table_code_detail(row,e){
            this.dialog.print2 = true
            this.$nextTick(() => {
                this.$refs.print2Dialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },
        // 报关清单
        table_comparison(row,e){
            this.dialog.print3 = true
            this.$nextTick(() => {
                this.$refs.print3Dialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },

        // 追加
        table_append(row,e){
            this.dialog.append = true
            this.$nextTick(() => {
                this.$refs.appendDialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },
        // 补货/退货
        table_restock(row,type,e){
            this.dialog.restock = true
            this.$nextTick(() => {
                this.$refs.restockDialog.open('edit').setData(row,type)
            })
            this.common.buttonBlur(e)
        },
        // 作废记录
        cancel_record(e){
            this.dialog.cancel = true
            this.$nextTick(() => {
                this.$refs.cancelDialog.open('edit')
            })
            this.common.buttonBlur(e)
        }
    }
}
</script>

<style lang="scss">
.margin{
    margin: 5px 0;
}
.display {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn{
    display: flex;
    div{
        display: flex;
        flex-direction: column;
        margin-left: 12px;
    }
    button{
        margin-left: 0 !important;
        margin-bottom: 5px;
        width: fit-content;
    }
}
.status{
    padding: 2px 5px;
    font-size: 14px;
    border: 1px solid #000;
    cursor: pointer;
}
.el-popper.is-customized {
    /* Set padding to ensure the height is 32px */
    padding: 6px 12px;
    background: #78ba32;
}

.el-popper.is-customized .el-popper__arrow::before {
    background: #78ba32;
    right: 0;
}
.tooltip{
    font-size: 14px;
    color: #fff;
}
</style>
